[Web] 웹 페이지에 방문자 분석 기능 추가하기

구글 애널리틱스 (Google Analytics)

비즈니스에서 데이터의 중요성이 커지면서 다양한 직종에서 사용자 데이터를 많이 활용하고 있다. 구글 애널리틱스는 이런 데이터를 수집하고 분석해주는 도구 중 하나인데 주변에 퍼포먼스 마케팅에 관심있는 친구들이 GA 관련 자격증을 따는 것을 보기도 했고 예전에 전략기획팀 인턴으로 일하면서 GA를 활용해 회사 유튜브 같은 컨텐츠의 사용자 분석을 하는데 활용하기도 했다.

그러다 갑자기 개발자가 되어 구글 애널리틱스를 다시 활용하고자 하는 이유는 웹 페이지에 방문자 분석 기능을 추가해보고 싶어서였다. hits를 사용해서 쉽게 방문자를 파악할 수도 있는데 hits는 사실 방문자 수라기 보다는 새로고침 수에 가깝기 때문에 정확한 분석이 어렵다는 문제가 있다. 구글 애널리틱스는 세션 시간, 방문자 경로, 실질적인 방문 횟수 등 더 다양한 분석 기능을 제공하고 있어서 이를 잘 활용해보려고 한다.

웹 페이지 방문자 분석 기능

구글 애널리틱스 계정 생성

1. 구글 로그인 & 측정 시작하기
🔗 Google Analytics 링크

2. 계정 생성하기

3. 프로퍼티 생성하기

4. 비즈니스 유형 설정하기
기준 시간을 한국으로 설정해두면 한국 시간에 맞춰 리포팅을 하게 된다.

5. 비즈니스 목적 설정하기
방문자 분석 및 통계를 확인할 것이기 때문에 첫번째 목표를 선택한다.

6. 데이터를 수집할 플랫폼 유형 선택하기
깃허브 블로그의 방문자 데이터를 수집할 예정이기 때문에 Web을 선택한다.

7. 데이터 스트림 설정하기
내가 수집할 웹 사이트의 URL을 작성하고 스트림명을 지어준다.

8. 웹 스트림 상세 화면에서 MEASUREMENT ID 확인하기
모든 설정을 마치고 나면 Measurement ID를 받게 된다. 이 측정 아이디를 웹 페이지에 추가하므로써 방문자 통계를 확인할 수 있다.

웹 페이지에 MEASUREMENT ID 추가

나는 깃허브 블로그의 방문자 수를 측정할 목적이기 때문에 깃허브 블로그를 기준으로 작성하도록 할 것이다. 내가 수정한 항목은 아래와 같다.

zisu17.github.io
├── _config.yml
├── _includes
│   └── analytics-providers
│       └── google-gtag.html
└── _layouts
    ├── default.html
    └── posts.html

1. _config.yml 수정
구글 애널리틱스의 가장 최신 버전인 GA4를 사용하기 때문에 provider를 google-gtag로 하고 measurement_id는 위에서 발급받은 Measurement ID로 설정한다.

# Analytics
analytics:
  provider         : "google-gtag" # false (default), "google", "google-universal", "google-gtag", "custom"
  google:
    measurement_id    : "G-**********" # Replace this with your ID, or delete
    anonymize_ip   : true

2. _includes/analytics.html 확인
내 깃허브 테마의 구조를 보면 analytics.html에서 세 가지 버전의 구글 애널리틱스 provider를 제공하고 있는 것을 볼 수 있는데 마찬가지로 GA4를 사용하고 있기 때문에 google-gtag.html 파일을 수정해주면 된다.

{% if jekyll.environment == 'production' and site.analytics.provider and page.analytics != false %}

{% case site.analytics.provider %}
{% when "google" %}
  {% include /analytics-providers/google.html %}
{% when "google-universal" %}
  {% include /analytics-providers/google-universal.html %}
{% when "google-gtag" %}
  {% include /analytics-providers/google-gtag.html %}
{% when "custom" %}
  {% include /analytics-providers/custom.html %}
{% endcase %}

{% endif %}

3. _includes/analytics-providers/google-gtag.html 수정
아까 웹 스트림 상세 화면에서 View tag instructions를 클릭하면 아래와 같은 화면이 나오는데 해당 Google tag를 copy해서 google-gtag.html 파일에 붙여 넣어준다.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-**********');
</script>

4. _layouts/default.html 수정
아래처럼 include head.html과 custom.html에 아래에 analytics.html를 추가해준다.

    {% include head.html %}
    {% include head/custom.html %}
    {% include analytics.html %}

5. _layouts/posts.html 수정
포스트의 방문자 수도 확인할 예정이기 때문에 posts.html 파일에도 추가해준다.

{% include analytics.html %}

구글 애널리틱스에서 방문자 통계 확인

그렇게 모두 설정한 후 깃허브에 푸시하고 나면 구글 애널리틱스에서 방문자 통계를 확인할 수 있다! 기존에 새로고침 수만을 보여줬던 hits와는 구글 애널리틱스는 실제 방문자 수와 페이지별 방문 횟수 등을 보여주게 된다.